<template>
	<div ref="NetAlarmLog" class="NetAlarmLogBox">

		<el-table :header-cell-style="{
        background: 'rgb(2, 16, 51)',
        'border-bottom': 'none',
        'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
        'text-align': 'center',
        color: 'aliceblue',
      }" :cell-style="{
        background: 'rgba(2, 16, 51, 0)',
        'border-top': '1px solid rgba(4, 44, 119, 0.5)',
        'border-bottom': 'none',
        'text-align': 'center',
        color: 'aliceblue',
      }" :data="tableDataFn" height="100%" style="width: 100%" empty-text="暂无告警" v-loading="tableDataFn.length < 1"
			element-loading-text="暂无紧急告警" element-loading-spinner="el-icon-warning-outline"
			element-loading-background="#021033">
			<el-table-column type="index" width="50" label="序号"> </el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" align="center" :width="item.width"
					:key="item.prop">
					<template v-slot="scope">
						<template v-if="item.format == 'ALERT_LEVEL'">
							<div style="text-align: center">
								<el-tag :type="scope.row.levelType" disable-transitions size="mini" effect="dark">
									{{ scope.row[item.prop] }}
								</el-tag>
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import tableColumns from "./NetAlarmLogTableColumns.js";

	export default {
		data() {
			return {
				postData: {
					opera: "osalertlist",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						monid: "",
					},
				},
				tableData: [],
				tableColumns: tableColumns,
				timerName: "NetAlarmLog",
				timerEventName: "timerNetAlarmLog",
				timerInterval: 1000 * 60,
				selectedMonID: {},
			};
		},
		created() {
			bus.$on("selectedNetMonID", (msg) => {
				this.resetData();
				// 获取数据
				this.selectedMonID = msg;
				this.postData.filters.monid = this.selectedMonID.selectedNETMonID;
				this.getData();
			});

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.resetData();

					this.getData();
				}
			});
		},
		mounted() {},
		computed: {
			tableDataFn() {
				return this.tableData.filter((item) => {
					switch (item.ALERT_LEVEL) {
						case 1:
							item.ALERT_LEVEL = "提醒";
							item.levelType = "info";
							break;
						case 2:
							item.ALERT_LEVEL = "普通";
							item.levelType = "warning";
							break;
						case 3:
							item.ALERT_LEVEL = "紧急";
							item.levelType = "danger";
							break;

						default:
							break;
					}

					return item;
				});
			},
		},
		methods: {
			getData() {
				fetchData({
					postData: JSON.stringify(this.postData),
				}).then((res) => {
					this.tableData = res.data;
				});
			},
			resetData() {
				this.tableData = [];
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
		watch: {},
	};
</script>

<style scoped>
	.NetAlarmLogBox {
		height: calc(100% - 8px - 22px);
	}

	.NetAlarmLogBox>>>.el-table::before {
		height: 0px !important;
	}

	.NetAlarmLogBox>>>.el-table tr {
		background-color: rgba(1, 40, 107, 0) !important;
	}

	.NetAlarmLogBox>>>.el-table {
		background: rgba(2, 16, 51, 0);
	}

	.NetAlarmLogBox>>>.el-table__body-wrapper::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.NetAlarmLogBox>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: rgba(4, 44, 119, 0.7);
		border-radius: 3px;
	}
</style>
